<template>

  <div class="mod">
    <h1 class="mod_h1"><font color="white">让我们开始注册吧！</font></h1>
  </div>
  <div class="login_mod">
    <h1><font color="#5887f7">注册</font></h1>
    <div class="wrapper_input">
      <input class="input" placeholder="用户名" v-model="data.uname"/>
      <input class="input" placeholder="账号" v-model="data.username"/>
      <input class="input" placeholder="密码" v-model="data.password"/>
      <input class="login" type="submit" value="注册" @click="handleRegister">
      <ToastView v-if="data.showToast" v-bind:message="data.toastMessage" />
    </div>
  </div>
</template>

<script>
import {useRouter} from 'vue-router';
import axios  from "axios";
import { reactive } from 'vue'
import ToastView from "@/components/ToastView";



export default {
  name: "RegisTer.vue",
  components:{
    ToastView
  },
  setup() {
    const data = reactive({
      username:'',
      uname:'',
      password:'',
      password2:'',
      showToast:false,
      toastMessage:''
    });

    const router = useRouter();

    const changeToast = (message) => {
      data.showToast = true;
      data.toastMessage = message;
      setTimeout(() => {
        data.showToast = false;
        data.toastMessage = '';
      },5000)
    };
    const handleRegister = () => {
      axios.post('http://localhost:8090/register',{
        loginName: data.username,
        name:data.uname,
        password: hexMd5(data.password + KEY)
      }).then((resp) => {
        console.log(resp);
        if(resp.data.success){
          changeToast('注册成功');
          setTimeout(() => {
            router.push({name:'login'})
          }, 2000);
        }else
        {
          changeToast('好像？重名了！');
        }
      }).catch((err) => {
        console.log(err);

      });


    };
    const handletologin = () => {
      router.push({name: 'Login'})
    }
    return { handletologin ,handleRegister,data,changeToast}
  }
}
</script>

<style scoped>

.mod {
  position: fixed;
  height: 50%;
  width: 100%;
  background: #5887f7;

}
.mod_h1{
  position: fixed;
  top:40%;
  left: 20%;
  font-size: 250%;
}
.login_mod{

  width: 288px;
  height: 326px;
  background: rgba(255, 255, 255, 1);
  /*加阴影*/
  box-shadow: 0px 2px 30px rgba(79, 79, 79, 0.3);
  /*圆角*/
  border-radius: 19px;

  position: fixed;
  left: 40%;
  right: 0px;
  bottom: 0px;
  top: -10%;
  margin: auto;
}
.wrapper_input{
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
.input{
  height: 25px;
  margin-top: 18px;
  border: none;
  outline: none;
  margin-left: 18px;
  /*下划线*/
  box-shadow: 0px 1px 0px rgba(79, 79, 79, 0.3);
}
.login{
  height: 32px;
  width: 60%;
  margin-top: 40px;
  margin-right: auto;
  margin-bottom: 0px;
  border-radius: 4px;
  margin-left: auto;
  border: none;
}
.yz {
  margin-top: 18px;
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

</style>